import React, { Component } from 'react';
import { View, Image, Icon } from '@tarojs/components';
import { AtCheckbox, AtListItem, AtList, AtNavBar } from "taro-ui";
import './meetingroom.less';
import Taro from '@tarojs/taro';
import config from '../../config.json'

function getCurrentPageUrlWithArgs() {
    var pages = Taro.getCurrentPages()    //获取加载的页面
    var currentPage = pages[pages.length - 1]    //获取当前页面的对象
    var url = currentPage.route    //当前页面url
    var options = currentPage.options    //如果要获取url中所带的参数可以查看options

    return options
}


interface adminroomState {
    isSelect: boolean,
    datas: any[],
    checkedList: number[]
}

interface meetroomData {
    area: number
    mid: number
    name: string
    note: string
    projector: number
    wifi: number
}

export default class Index extends Component<any, adminroomState> {
    constructor(props) {
        super(props);
        this.state = {
            isSelect: false,
            datas: [
            ],
            checkedList: []
        }
    }

    load() {
        Taro.showLoading({ title: "加载中..." });
        Taro.getStorage({
            key: "token",
            success: (token) => {
                Taro.request({
                    url: config.domainName + "/meetroom/query",
                    header: {
                        "token": token.data,
                    },
                    success: (res) => {
                        let response = res.data;
                        if (!response.code) {
                            let data: meetroomData[] = response.data;
                            this.setState({
                                datas: data.map((item) => {
                                    return {
                                        value: item.mid,
                                        label: item.name,
                                        desc: item.note ? item.note : "没有描述"
                                    }
                                })
                            })
                        }
                        Taro.hideLoading();
                    },
                    fail: (res) => {
                        console.log(res);
                        Taro.hideLoading();
                    }
                })
            }
        })
    }

    componentWillMount() {
        this.load();
    }

    componentDidMount() { }

    componentWillUnmount() { }

    componentDidShow() {
        let _this = this;
        let r = Taro.getStorageSync("refresh");
        if(r) {
            this.load();
        }
    }

    componentDidHide() { }

    handleChange(value) {
        this.setState({
            checkedList: value
        })
    }
    toggleView() {
        this.setState((value) => {
            return {
                isSelect: !value.isSelect
            }
        })
    }
    handleClickListItem(value) {
        Taro.navigateTo({
            url: "/pages/adminroomsetting/adminroomsetting?mid=" + value.value
        })
    }
    onPullDownRefresh() {
        Taro.startPullDownRefresh();
        setTimeout(() => {
            Taro.stopPullDownRefresh();
        }, 0)
    }

    async onDelete() {
        let _this = this;
        Taro.showModal({
            title: '提示',
            content: '确定要删除吗？删除后数据不可恢复。',
            async success(res) {
                if (res.confirm) {
                    console.log('用户点击确定')
                    Taro.showLoading();
                    try {
                        let token = Taro.getStorageSync("token")
                        let res = await Taro.request({
                            url: config.domainName + "/meetroom/delete",
                            method: "POST",
                            data: {
                                mids: _this.state.checkedList
                            },
                            dataType: "json",
                            header: {
                                "token": token
                            }
                        });
                        let response = res.data;
                        if (!response.code) {
                            Taro.showToast({ title: "操作成功" })
                            setTimeout(() => {
                                _this.setState({
                                    isSelect: false
                                });
                                _this.load();
                            }, 1000);

                        } else {
                            Taro.showToast({ title: response.msg, icon: "error" as any });
                        }
                    } catch (err) {
                        console.log(err)
                        Taro.showToast({ title: err });
                    } finally {
                        Taro.hideLoading();
                    }
                } else if (res.cancel) {
                    console.log('用户点击取消')
                }
            }
        })

    }

    onInsert() {
        Taro.navigateTo({ url: "/pages/addmeetingroom/addmeetingroom" })
    }

    render() {
        return (
            <View>
                <AtNavBar
                    onClickLeftIcon={() => { Taro.navigateBack() }}
                    color='#000'
                    title='会议室管理'
                    leftIconType="chevron-left"
                />
                <View style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginRight: "20px" }}>
                    <View className="module-title">会议室列表</View>
                    <View
                        style={{ width: "60px", height: "20px", display: "flex", justifyContent: "flex-end" }}
                        onClick={this.toggleView.bind(this)}
                    >
                        {this.state.isSelect ? <View className="primary-color-text" style={{fontSize: "0.7rem"}}>取消</View> : <Image style={{ height: "0.8rem", width: "0.8rem" }} src={config.domainName + "/列表设置.png"} />}
                    </View>
                </View>
                {this.state.isSelect ? <AtCheckbox
                    options={this.state.datas}
                    selectedList={this.state.checkedList}
                    onChange={this.handleChange.bind(this)}
                /> :
                    <AtList>{(() => {
                        return this.state.datas.map((value) => {
                            return <AtListItem
                                title={value.label}
                                onClick={this.handleClickListItem.bind(this, value)}
                                note={value.desc}
                                arrow='right'
                            />
                        })
                    })()}</AtList>
                }
                {this.state.isSelect ? <IconDelBtn onClick={this.onDelete.bind(this)} /> : <IconAddBtn onClick={this.onInsert.bind(this)} />}
            </View>
        )
    }
}


class IconAddBtn extends Component<{ onClick: any }, any> {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View onClick={this.props.onClick} className={`at-icon at-icon-add`} style={{
                position: "fixed",
                right: "50px",
                bottom: "50px",
                fontSize: "30px",
                padding: "10px",
                color: "#888",
                border: "1px solid #eee",
                borderRadius: "50%",
                boxShadow: "2px 5px 10px 2px #eee"
            }}></View>
        )
    }
}

class IconDelBtn extends Component<{ onClick: any }, any> {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View onClick={this.props.onClick} className={`at-icon at-icon-trash`} style={{
                position: "fixed",
                right: "50px",
                bottom: "50px",
                fontSize: "30px",
                padding: "10px",
                color: "red",
                border: "1px solid #eee",
                borderRadius: "50%",
                boxShadow: "2px 5px 10px 2px #eee"
            }}></View>
        )
    }
}